<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.13.0/themes/smoothness/jquery-ui.css">

    <!--<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>-->
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery.form/4.3.0/jquery.form.min.js"></script>
    <script src="http:///code.jquery.com/ui/1.13.0/jquery-ui.js"></script>

    <style type="text/css">
        .progress{
            width: 500px;
            height:24px;
            line-height:24px;
        }
    </style>
</head>
<body>
    <h1>jquery.form方式展示文件上传进度</h1>
    <div id="progressbar" class="progress"></div>
    <div class="percent">0%</div >

    <div id="status"></div>
    <form action="/api/file/upload" method="post" enctype="multipart/form-data">
        <input type="file" name="fileItem"><br>
        <input type="submit" value="Upload File to Server">
    </form>

    <script>
        $(function() {
            // 初始化进度条
            var progressbar = $( "#progressbar" );
            progressbar.progressbar({
                value: 0
                /*change: function() {
                    progressLabel.text( progressbar.progressbar( "value" ) + "%" );
                },
                complete: function() {
                    progressLabel.text( "上传完成!" );
                }*/
            });

            var percent = $('.percent');
            var status = $('#status');

            $('form').ajaxForm({
                beforeSend: function() {
                    status.empty();
                    var percentVal = '0%';
                    //bar.width(percentVal);
                    percent.html(percentVal);
                },
                uploadProgress: function(event, position, total, percentComplete) {
                    var percentVal = percentComplete + '%';
                    //bar.width(percentVal);
                    $( "#progressbar" ).progressbar({
                        value: percentComplete
                    });
                    progressbar.find( ".ui-progressbar-value" ).css({
                        "background": "rgb(105 167 69)"
                        //"background": '#' + Math.floor( Math.random() * 16777215 ).toString( 16 )
                    });
                    percent.html(percentVal);
                },
                complete: function(xhr) {
                    status.html(xhr.responseText);
                }
            });
        });
    </script>
</body>
</html>
